<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <title>Source Serif Pro</title>
    <link rel="stylesheet" href="source-serif-pro.css">
    <style>

        body {
            font-family: 'Source Serif Pro', sans;
            overflow-x: hidden;
            font-feature-settings: "kern" 1,"liga" 1;
            font-size: 100%;
        }
        article {
            margin: 0 auto;
            max-width: 900px;
            padding: 1em;
        }
        h1 {
            font-size: 56px;
            margin: 0;
        }
        h2 {
            color: #AAA ;
            margin-top: 0.75em;
            margin-bottom: 0;
        }
        div {
            font-size: 40px;
            padding: 0.5em 0.75em;
            margin: 0;
            outline: 0px solid transparent;
            autocorrect: "off";
            overflow: hidden;
            hyphens: off;
        }
        p {
            margin: 0;
            padding-bottom: .5em;
        }
        div:hover
        {
            background-color: #EEE;
        }
        .ribbon {
            background: none repeat scroll 0% 0% rgb(34, 34, 34);
            color: white;
            display: block;
            font: 400 13px 'Source Serif Pro';
            font-weight: 700;
            padding: 8px 150px;
            position: absolute;
            right: 0px;
            text-decoration: none;
            top: 0px;
            -webkit-transform: translate(50%, -50%) rotate(45deg) translateY(72px);
            -moz-transform: translate(50%, -50%) rotate(45deg) translateY(72px);
            -ms-transform: translate(50%, -50%) rotate(45deg) translateY(72px);
            -o-transform: translate(50%, -50%) rotate(45deg) translateY(72px);
            transform: translate(50%, -50%) rotate(45deg) translateY(72px);
            white-space: nowrap;
        }
        .smcp {
            font-feature-settings: "smcp" 1;
        }

        .onum {
            font-feature-settings: "onum" 1;
        }

        .pnum {
            font-feature-settings: "pnum" 1;
        }

        .sups {
            font-feature-settings: "sups" 1;
        }

/*        :lang(sr)   {
            font-feature-settings: "locl" 1;
            }
*/
        @media (max-width: 720px) {
            h1 {
                font-size: 36px;
            }
            h2 {
                font-size: 18px;
            }
            div {
                padding: 0;
                font-size: 18px;
            }
        }

        @media (min-width: 1200px) {
            h1 {
                font-size: 72px;
            }
            h2 {
                font-size: 32px;
            }
            div {
                font-size: 50px;
            }
            article {
                max-width: 1100px;
            }
        }

    </style>
  </head>
  <body>
    <article spellcheck="false">
        <h1>Source Serif Pro</h1>
        <hr>

        <h2 style="font-weight: 200;">ExtraLight</h2>
        <div contenteditable style="font-weight: 200;">
        <p>
            Svo hölt, yxna kýr þegði jú um<br>
            dóp í fé á bæ. Muzicologă în bej<br>
            vând whisky și tequila, preț fix.
        </p>
        <p>
            Που έτσι κι αλλιώς δεν ξέρει από<br>
            χιόνια. Άγιο Στέφανο, Στα βόρεια<br>
            3 με 5 βαθμούς χαμηλότερη.</p>
        <p>
            Также было установлено, эта<br>
            разница в 10 раз меньше, в<br>
            предгорьях и горах.
        </p>
        </div>

		<hr>
        <h2 style="font-weight: 200; font-style: italic;">ExtraLight Italic</h2>
        <div contenteditable style="font-weight: 200; font-style: italic;">
        <p>
            Svo hölt, yxna kýr þegði jú um<br>
            dóp í fé á bæ. Muzicologă în bej<br>
            vând whisky și tequila, preț fix.
        </p>
        <p>
            Που έτσι κι αλλιώς δεν ξέρει από<br>
            χιόνια. Άγιο Στέφανο, Στα βόρεια<br>
            3 με 5 βαθμούς χαμηλότερη.</p>
        <p>
            Также было установлено, эта<br>
            разница в 10 раз меньше, в<br>
            предгорьях и горах.
        </p>
		</div>
        <hr>

        <h2 style="font-weight: 300;">Light</h2>
        <div contenteditable style="font-weight: 300;">
        <p>
            Bâchez la queue du wagon-taxi<br>
            avec les pyjamas du fakir. Příliš<br>
            žluťoučký kůň úpěl ďábelské ódy.
        </p>
        <p>
            Αγίου Βλασίου, Νεφώσεις κατά<br>
            περιόδους αυξημένες με τοπικές<br>
            χιονοπτώσεις, Θεσσαλία.
        </p>
        <p>
            Либо самку этого подвида.<br>
            Самца называют кот, а также<br>
            феромоны и движения тела.
        </p>

        </div>

        <hr>
        <h2 style="font-weight: 300; font-style: italic;">Light Italic</h2>
        <div contenteditable style="font-weight: 300; font-style: italic;">
        <p>
            Bâchez la queue du wagon-taxi<br>
            avec les pyjamas du fakir. Příliš<br>
            žluťoučký kůň úpěl ďábelské ódy.
        </p>
        <p>
            Αγίου Βλασίου, Νεφώσεις κατά<br>
            περιόδους αυξημένες με τοπικές<br>
            χιονοπτώσεις, Θεσσαλία.
        </p>
        <p>
            Либо самку этого подвида.<br>
            Самца называют кот, а также<br>
            феромоны и движения тела.
        </p>
        </div>
        <hr>

        <h2 style="font-weight: 400;">Regular</h2>
        <div contenteditable style="font-weight: 400;">
        <p>
            Eble ĉiu kvazaŭ-deca fuŝĥoraĵo<br>
            ĝojigos homtipon. Quel fez<br>
            sghembo copre davanti.
        </p>
        <p>
            Αφορά τα σχολεία σε Άνοιξη,<br>
            Στον δήμο Μεσολογγίου,<br>
            Θερμοκρασία: από -5 έως 4<br>
            βαθμούς κελσίου.
        </p>
        <p>
            Обозначающих кошку, либо<br>
            самку этого подвида. которое<br>
            датируется 7500 годом до н.
        </p>
        </div>
        <hr>

        <h2 style="font-weight: 400; font-style: italic;">Italic</h2>
        <div contenteditable style="font-weight: 400; font-style: italic;">
        <p>
            Pijamalı hasta yağız şoföre<br>
            çabucak güvendi. Was there a <br>
            quorum of able whizzkids gravely<br>
            exciting the jaded fish at ATypI?<br>
        </p>
        <p>
            Αφορά τα σχολεία σε Άνοιξη,<br>
            Στον δήμο Μεσολογγίου,<br>
            Θερμοκρασία: από -5 έως 4<br>
            βαθμούς κελσίου.
        </p>
        <p>
            Обозначающих кошку, либо<br>
            самку этого подвида. которое<br>
            датируется 7500 годом до н.
        </p>

        </div>
        <hr>

        <h2 style="font-weight: 600;">Semibold</h2>
        <div contenteditable style="font-weight: 600;">
        <p>
            Voyez le brick géant que<br>
            j’examine près du wharf.<br>
            Whisky bueno: ¡excitad mi<br>
            frágil pequeña vejez!
        </p>
        <p>
            Αγίου Βλασίου, Νεφώσεις κατά<br>
            περιόδους αυξημένες με τοπικές<br>
            χιονοπτώσεις, να ακρωτηριάζη.
        </p>
        <p>
            Звукоподражательными,<br>
            чтобы питаться грызунами,<br>
            эта разница в 10 раз меньше.
        </p>

        </div>
        <hr>

        <h2 style="font-weight: 600; font-style: italic;">Semibold Italic</h2>
        <div contenteditable style="font-weight: 600; font-style: italic;">
        <p>
            Voyez le brick géant que<br>
            j’examine près du wharf.<br>
            Whisky bueno: ¡excitad mi<br>
            frágil pequeña vejez!
        </p>
        <p>
            Αγίου Βλασίου, Νεφώσεις κατά<br>
            περιόδους αυξημένες με τοπικές<br>
            χιονοπτώσεις, να ακρωτηριάζη.
        </p>
        <p>
            Звукоподражательными,<br>
            чтобы питаться грызунами,<br>
            эта разница в 10 раз меньше.
        </p>
        </div>
        <hr>

        <h2 style="font-weight: 700;">Bold</h2>
        <div contenteditable style="font-weight: 700;">
        <p>
            Một câu có chứa tất cả chữ cái<br>
            trong bảng chữ cái. Go, lazy fat<br>
            vixen; be shrewd, jump quick.
        </p>
        <p>
            Επίσης, Έχει μέγεθος μικρού<br>
            σκύλου, Οι Έλληνες δώσαμε<br>
            στην ιταμή αυτή αξίωσι της<br>
            φασιστικής βίας.
        </p>
        <p>
            Звукоподражательными,<br>
            обозначающих кошку, а сама<br>
            могла прийти к человеку.
        </p>
        </div>
        <hr>

        <h2 style="font-weight: 700; font-style: italic;">Bold Italic</h2>
        <div contenteditable style="font-weight: 700; font-style: italic;">
        <p>
            Es extraño mojar queso<br>
            en la cerveza o probar<br>
            whisky de garrafa.
        </p>
        <p>
            Επίσης, Έχει μέγεθος μικρού<br>
            σκύλου, Οι Έλληνες δώσαμε<br>
            στην ιταμή αυτή αξίωσι της<br>
            φασιστικής βίας.
        </p>
        <p>
            Звукоподражательными,<br>
            обозначающих кошку, а сама<br>
            могла прийти к человеку.
        </p>
        </div>
        <hr>

        <h2 style="font-weight: 900;">Black</h2>
        <div contenteditable style="font-weight: 900;">
        <p>
            Vår sære Zulu fra badeøya<br>
            spilte jo whist og quickstep i<br>
            min taxi. Šerif bo za vajo spet<br>
            kuhal domače žgance.
        </p>
        <p>
            Οι άνεμοι θα πνέουν βόρειοι<br>
            βορειοδυτικοί 5 με 7 μποφόρ.<br>
            Ξέγνοιαστες, Ελληνοχωρίου.
        </p>
        <p>
            Обозначающих кошку,<br>
            подтверждается тем, а сама<br>
            могла прийти к человеку.
        </p>
        </div>
        <hr>
        <h2 style="font-weight: 900; font-style: italic;">Black Italic</h2>
        <div contenteditable style="font-weight: 900; font-style: italic;">
        <p>
            Vår sære Zulu fra badeøya<br>
            spilte jo whist og quickstep i<br>
            min taxi. Šerif bo za vajo spet<br>
            kuhal domače žgance.
        </p>
        <p>
            Οι άνεμοι θα πνέουν βόρειοι<br>
            βορειοδυτικοί 5 με 7 μποφόρ.<br>
            Ξέγνοιαστες, Ελληνοχωρίου.
        </p>
        <p>
            Обозначающих кошку,<br>
            подтверждается тем, а сама<br>
            могла прийти к человеку.
        </p>
        </div>

        <a class="ribbon" href="https://github.com/adobe-fonts/source-serif-pro">Fork me on GitHub</a>

    </article>
  </body>
</html>
